<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
      <!-- 模板里面不用写this -->
    <div id="app">
      <input type="text" v-model="msg" />
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
      // watch 侦听器
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "Hello World!",//相当于get
          text: "11",
          obj: {
              a: 1, b: 2,c:{ d:9}
          }
        },
        computed: {
          // 1. 计算属性会有缓存，
          //  2. 如果计算属性发现对应的依赖没有改变，调用计算属性时，会直接返回缓存的结果
          //   reverseStr是msg的一个依赖，相当于set,msg一改变就会通知computed重新计算结果
        //   reverseStr() {
        //     console.log("计算属性被调用");
        //     return this.msg.split("").reverse().join("");
        //   },
        },
        // 监听
        // 通过watch给msg添加了一个依赖
        watch: {
            // msg:function(){
            //     consorgle.log("msg变化")
            // }
            // 这个msg对应data中的msg,如果data中的msg变化，那么这个代码就执行
            // 上面的简写
            // msg(){
            //     console.log("msg变化");
            // },
            // 固定位置，第一个是新值，第二个是旧值
            // msg(newVal,oldVal){
            //     console.log("msg变化");
            //     console.log(newVal,oldVal);
            // },
            msg: function(newVal,oldVal){
                console.log("msg变化");
                console.log(newVal,oldVal);
            },
            
            // watch默认的监听情况是浅层的，如果监听的是一个对象，对象中属性的变化不会引起watch的执行
            // obj(){
            //     console.log("obj发生了变化");

            // }

            obj:{
                deep: true,//深度监听，默认false
                // handler是固定写法
                // obj用的是引用地址，obj是在栈中，它的内容是放在堆中的，
                // 任何就是我改变的话都是改变的是堆中的数据，然后所以我的新值和旧值都是一样的
                handler:function(newVal,oldVal){
                    console.log(newVal,oldVal);
                }

            },

            // 这里的obj.a中不用加this,模板中也不用加this
            // 指定对象中某个具体的属性 进行监听
            // 为什么这个会不一样呢，因为这个是
            // "obj.a":function(val,oldVal){
                // console.log(val,oldVal);//默认好像会打一个a出来
                // console.log("a",val);
                // console.log("b",oldVal)
            // },


            // "obj.c":{
            //     deep: true,
            //     // handler是固定写法
            //     // obj用的是引用地址，obj是在栈中，它的内容是放在堆中的，
            //     // 任何就是我改变的话都是改变的是堆中的数据，然后所以我的新值和旧值都是一样的
            //     handler:function(newVal,oldVal){
            //         console.log(newVal,oldVal);
            //     }

            // }

            // 让监听建立之后，回调函数立即被执行
                text:{
                    //本来是data中的数据改变，这个才执行，但是写了这个之后，只要vue一存在，
                    // data一存在，不用改它，不用改变，监听一建立，立刻执行
                    immediate: true, //默认为false,立即的意思
                    handler: function(val,oldVal){
                        console.log("text",val);
                        console.log("textold",oldVal)
                    }
                },
        },
      });

    //   vm.$watch("msg",function(val,oldval){console.log("函数执行");console.log(val,oldval)})
    //   vm.$watch("msg",function(val,oldval){console.log("函数执行");console.log(val,oldval)})

     
    </script>
  </body>
</html>